<template>
  <!-- 左侧组件 -->
  <div class="Fg-outline" :key="JSON.stringify(list)">
    <el-tree
      :data="layoutTree"
      draggable
      default-expand-all
      :allow-drop="allowDrop"
      :allow-drag="allowDrag"
      @node-click="handleActive"
    >
      <template #slot-scope="{ node, data }">
      <div  class="Fg-outline--item">
        <div :class="activeId==data?.__config__?.formId?'Fg-Blue':''">
          <svg-icon
            v-if="data.__config__"
            style="margin-right:8px"
            :icon-class="data.__config__.tagIcon"
          />
          <span>{{ data.__config__?.label ||data.__config__?.componentName ||data.label || data.id}}</span>
        </div>
        <div>
          <i v-if="data.isLock" class="el-icon-lock" />
          <!-- <div class="Fg-cursor" style="margin-right:8px" @click.stop="handleLock(data)">
            <i :class="data.isLock?'el-icon-lock':'el-icon-unlock'" />
          </div>-->
          <!-- <div class="Fg-cursor" style="margin-right:8px" @click.stop="handleHide(data)">
            <svg-icon :icon-class="data.isHide?'noview':'view'" />
          </div>
          <el-dropdown
            placement="bottom-start"
            trigger="click"
            @command="handleSelect($event,data)"
          >
            <div class="Fg-cursor">
              <svg-icon icon-class="ellipsis" />
            </div>
            <el-dropdown-menu slot="dropdown" class="Fg-dropdown-menu">
              <el-dropdown-item command="Copy">复制</el-dropdown-item>
              <el-dropdown-item command="Delete">删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>-->
        </div>
      </div>
      </template>
    </el-tree>
  </div>
</template>

<script>
import { traverseTree, deepClone, cleanTree } from "../utils/index";
import store from "@/store";
import { ElMessageBox } from "element-plus";
export default {
  components: {},
  props: {
    // 表单列表
    list: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {};
  },
  computed: {
    layoutTree() {
      let list = [];
      this.list.forEach((item) => {
        const tree = cleanTree([deepClone(item)]);
        traverseTree(tree, (node) => {
          node.children = node?.children;
        });
        list = list.concat(tree);
      });
      return list;
    },
    activeId() {
      return store.state.app.activeId;
    },
  },
  methods: {
    handleSelect(command, item) {
      this[`handle${command}`](item);
    },

    // 锁定
    handleLock(item) {
      // const message = item.isLock
      //   ? "解锁后改组件可以修改任何配置"
      //   : "锁定后该组件将无法再修改任何配置";
      // ElMessageBox.confirm(
      //   message,
      //   `确定要${item.isLock ? "解锁" : "锁定"}该组件吗？`,
      //   {
      //     type: "warning",
      //   }
      // ).then(() => {
      //   item.isLock = !item.isLock;
      // });
    },

    // 复制
    handleCopy(item) {
      // const clone = createFormItem(item);
      // this.list.push(clone);
      // this.$emit('update:list',)
    },
    // 删除
    handleDelete(item) {
      // this.drawingList.splice(index, 1);
      // if (this.drawingList.length) {
      //   this.activeFormItem(this.drawingList[0]);
      // } else {
      //   this.activeFormItem({});
      // }
    },
    // 是否隐藏
    handleHide(item) {
      // item.isHide = !item.isHide;
    },
    // 选中
    handleActive(item) {
      if (item.__config__) store.commit("SET_ACTIVEDATA", item);
    },
    allowDrop(draggingNode, dropNode, type) {
      return false; // 暂时改为全部不可拖拽
      if (dropNode.data.allowDrop && type == "inner") return true;
      if (dropNode.data.__config__ && type !== "inner") return true;
      return false;
    },
    allowDrag(draggingNode) {
      return false; // 暂时改为全部不可拖拽
      return draggingNode.data.__config__ ? true : false;
    },
  },
};
</script>

<style lang="scss">
@import "../styles/generator.scss";
.Fg-outline {
  .el-tree-node__content {
    height: 36px;
  }
  .Fg-outline--item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding-right: 24px;
    .svg-icon {
      font-size: 20px;
    }
    > div {
      display: flex;
      align-items: center;
    }
  }
}
</style>
